<template>
	<view class="content" style="min-height: 100vh;background: #FFFFFF;">
		<view style="padding: 20rpx;">
			<view class="display-flex space-between align-items">
				<view class="time file-1 display-flex align-items">
					<input type="text" class="font-size-26 file-1" v-model="card_num" placeholder="请输入卡片编号" />
					<!-- <view style="height: 26rpx;background: #2671CE;width: 1rpx;">

					</view>
					<view class=" margin-left-20 margin-right-20 font-size-22 ">
						{{date}}
					</view>
					<view class="margin-right-10">
						<uv-icon name="arrow-down-fill" color="#2671CE" size="12"></uv-icon>
					</view> -->
				</view>
				<view style="padding: 20rpx;" @click="transfer_card_log()"
					class="button border-radius-12 margin-left-30 color-FFF font-size-24">
					搜索
				</view>
			</view>
			<view class="display-flex margin-top-20 align-items ">
				<zb-popover placement="bottom-start" :options="actions" ref="Popover1" @select="select"
					class="item-popover">
					<view class="time  display-flex align-items">
						<view class="margin-right-20 font-size-22 ">
							{{type.text || '全部'}}
						</view>
						<view class="">
							<uv-icon name="arrow-down-fill" color="#2671CE" size="12"></uv-icon>
						</view>
					</view>
				</zb-popover>
				<view @click="datetimePicker.open()" class="time margin-left-20 display-flex align-items">
					<view class=" font-size-22 ">
						{{date}}
					</view>
					<view class="margin-left-10">
						<uv-icon name="arrow-down-fill" color="#2671CE" size="12"></uv-icon>
					</view>
				</view>


			</view>
			<view v-if="list.length == 0" class="font-size-26 text-center margin-top-120 color-999">
				暂无转卡记录~
			</view>
			<view v-for="item,index in list" :key="index" class="">
				<view style="padding:20rpx 0;" class="">
					<view class="display-flex space-between">
						<view class="font-size-26 file-1 webkit-line-clamp" style="-webkit-line-clamp: 1;">
							编号 : {{item.card_num}}
						</view>
						<view class="margin-right-10 font-size-26">
							转入人：{{item.other_user}}
						</view>
					</view>
					<view class="display-flex space-between">
						<view class="font-size-22 file-1 webkit-line-clamp" style="-webkit-line-clamp: 1;">
							时间：{{timestampToDate(item.createtime * 1000,'Y-m-d')}}
						</view>
						<view class="margin-right-10 font-size-26">
							转出人：{{item.transfer}}
						</view>
					</view>
				</view>
				<uv-gap height="1" bgColor="#F5F5F5"></uv-gap>
			</view>
		</view>
		<uv-datetime-picker ref="datetimePicker" v-model="value" mode="date" :maxDate="Date.now()" @confirm="confirm">
		</uv-datetime-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		nativeUI,
		navigateTo,
		navigateBack,
		timestampToDate
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const date = ref(timestampToDate(Date.now(), 'Y/m/d'))
	const datetimePicker = ref(null)
	const value = Date.now()
	const actions = [{
			text: '全部',
			type: 'event_all'
		},
		{
			text: '转入',
			type: 'card_in'
		},
		{
			text: '转出',
			type: 'card_out'
		},
	];
	const type = ref({
		text: '全部',
		type: 'event_all'
	})
	const card_num = ref('')
	//分页
	const pagingState = ref(false)
	const page = ref(1)
	const list = ref([])
	onLoad(function(option) {
		
	});
	onShow(function() {transfer_card_log()});

	function select(event) {
		console.log(event);
		// date.value = timestampToDate(event.value, 'Y/m/d')
		type.value = event
		transfer_card_log()
	}

	function confirm(event) {
		console.log(event);
		date.value = timestampToDate(event.value, 'Y/m/d')
		transfer_card_log()
	}
	async function transfer_card_log() {
		
		if (!pagingState.value) {
			const {
				code,
				data
			} = await api.transfer_card_log({
				page: page.value,
				event: type.value.type,
				card_num: card_num.value,
				createtime: new Date(date.value).getTime() / 1000
			})
			list.value = list.value.concat(data.data)
			if (data.current_page == data.last_page) {
				pagingState.value = true
				return
			}
			page.value++
		}
	}
	onReady(function() {});
	onReachBottom(function() {
		transfer_card_log()
	});
</script>

<style scoped lang="scss">
	.time {
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1px solid #C3DAFC;
	}
</style>